<template>

<h2>会员等级权益列表</h2>
<input type="button" value="批量删除"  @click="BathchDeleteInfo" class="btn btn-success">
<table class="table table-success">
    <thead>
        <tr>
            <td>
                <input type="checkbox" v-model="cAll" @change="CheckAll">
            </td>
            <td>等级权益编号</td>
            <td>等级名称</td>
            <td>权益名称</td>
            <td>操作列</td>

        </tr>
    </thead>
    <tbody>
        <tr v-for="item in info">
            <td><input type="checkbox"  :value="item.RankRightsId"  @click="SelectCheck"    :checked="Ccheck" v-model="newArrys" ></td>
            <td>{{item.RankRightsId}}</td>
            <td>{{item.Rank_Name}}</td>
            <td>{{item.MR_Name}}</td>
            <td>操作列</td>

        </tr>
    </tbody>
</table>



</template>
<script setup lang="ts">

import { onMounted,ref } from 'vue';
import axios from 'axios';

//完成全选 反选
const cAll=ref(false);
const Ccheck=ref(false);

const newArrys=ref([]);


//批量删除
const BathchDeleteInfo=()=>{
if(newArrys.value.length==0){
    alert("请至少选中一条");
    return;
}

axios.get('https://localhost:7153/api/MemberRights/BatchRankRightsInfo',

{
    params:{
        ids:newArrys.value.toString()

    }
}


)
.then(res=>{
    if(res.data>0){
        alert("删除成功");
        LoadData();
    }
    else{
        alert("删除失败");
    }


})



}



const CheckAll=()=>{
   if(cAll.value==true){

    Ccheck.value=true;
    newArrys.value=info.value.map((item:any)=>{
        return item.RankRightsId

    })
   }
   else{
    Ccheck.value=false;
    newArrys.value=[];
   }

console.log(newArrys.value.toString());

}


//创建反选方法
const SelectCheck=()=>{
//判断后台返回数据长度是否知新数组长度一致
    if(info.value.lenth==newArrys.value.length)
    {//标题栏中的复选框中即可
        cAll.value=true;
    }
    else{
        cAll.value=false;
    }



}


// const newArry:any[]=ref([]);



// const SelectAll=()=>{
// if(chAll.value==true)
// {
//     isCheck.value=true;
//     newArry.values=  info.value.map((item:any)=>{
//         //会将指定的数据筛选，筛选后会保存到有个新的数组中
       
//         return item.RankRightsId;

//     })

// }
// else{
//     isCheck.value=false;
//     newArry.values=[];
// }

// }


const info:any=ref([{
    RankRightsId:0,
    Rank_Name:"",
    MR_Name:""


}])

onMounted(()=>{

    LoadData();
})

const LoadData=()=>{
    axios.get('https://localhost:7153/api/MemberRights/ShowMemberRankRights')
    .then(res=>{
        info.value=res.data
    })
}





</script>